<template>
  <div id="app">
		<div class="container">
		<div class="toptitle">
			<div class="topleft">
				<div class="item"><a href="">首页</a></div>
				<div class="item"><a href="movieList">选电影</a></div>
				<div class="item"><a href="">猜你喜欢</a></div>
				<div class="item"><a href="">智能问答</a></div>
				<div class="user">
					<img class="userlog" src="../assets/user.png"/>
					<div class="userinfo1" v-if="islogged">
						1234567
					</div>
					<div class="userinfo1" v-if="!islogged">
						<div class="userinfo2"><a href="login">登录</a></div>
						<div class="userinfo2">|</div>
						<div class="userinfo2"><a href="register">注册</a></div>
					</div>
				</div>
			</div>
		</div>
		<div class="searchPart">
			<span>
				<img class="logo" src="../assets/logo.png"/>
				<input class="searchInput" placeholder="请输入电影名称"/>
				<button class="searchButton" @click="search()">搜索</button>
			</span>
		</div>
		
		<div class="listpart">
		<div class="menu">
			<div class="divide" @click="isDivide()" :style="{background: buttoncolor1}">
				分类查找
			</div>
			<div class="result" @click="notDivide()" :style="{background: buttoncolor2}">
				搜索结果
			</div>
			<div class="line"></div>
		</div>
		<div class="sort" v-show="isdivide">
			<div class="typesort">
				<div class="type"><b>电影类型：</b></div>
				<div class="typebutton typebutton1" :style="{border: isActive[0]? border:'', color:isActive[0]? color:''}" @click="isChoose(0)">全部</div>
				<div class="typebutton typebutton2" :style="{border: isActive[1]? border:'', color:isActive[1]? color:''}" @click="isChoose(1)">科幻</div>
				<div class="typebutton typebutton3" :style="{border: isActive[2]? border:'', color:isActive[2]? color:''}" @click="isChoose(2)">悬疑</div>
				<div class="typebutton typebutton4" :style="{border: isActive[3]? border:'', color:isActive[3]? color:''}" @click="isChoose(3)">恐怖</div>
				<div class="typebutton typebutton5" :style="{border: isActive[4]? border:'', color:isActive[4]? color:''}" @click="isChoose(4)">喜剧</div>
				<div class="typebutton typebutton6" :style="{border: isActive[5]? border:'', color:isActive[5]? color:''}" @click="isChoose(5)">爱情</div>
			</div>
			<div class="typesort">
				<div class="type"><b>排序方式：</b></div>
				<label class="typebutton typebutton0"><input name="sort" type="radio" checked="checked" value="" />默认排序 </label> 
				<label class="typebutton typebutton0"><input name="sort" type="radio" value="" />按评分排序 </label> 
				<label class="typebutton typebutton0"><input name="sort" type="radio" value="" />按热度排序 </label> 
			</div>
		</div>
		<div class="list">
			<div class="movies">
				<div class="movie" v-for="(movie,index) in movies " v-bind:key="index" v-show="index<((movies.length<show_num)?movies.length:show_num)">
					<div class="mpic" :style="{backgroundImage:'url(https://'+movie.imgurl+')',backgroundSize:'cover',}">
					</div>
					<div class="mname">
						<div class="name">{{movie.m_name}}</div>
						<div class="score">{{movie.rate}}</div>
					</div>
				</div>
			</div>
			<!-- <div class="number">
				<ul class="pagination">
					<li><a href="#">«</a></li>
					<li><a href="#">1</a></li>
					<li><a class="active" href="#">2</a></li>
					<li><a href="#">3</a></li>
					<li><a href="#">4</a></li>
					<li><a href="#">5</a></li>
					<li><a href="#">6</a></li>
					<li><a href="#">7</a></li>
					<li><a href="#">»</a></li>
				</ul>
			</div> -->
			<div class="more">
				加载更多
			</div>
		</div>
		<br>
		</div>
		
		
		<div class="likepart">
		<div class="like">
			<div class="likebutton">
				猜你喜欢
			</div>
			<div class="line"></div>
		</div>
		<div class="list">
			<div class="movies">
				<div class="movie" v-for="(like,index) in likes " v-bind:key="index">
					<div class="mpic">
						海报
					</div>
					<div class="mname">
						<div class="name2">电影名称</div>
					</div>
				</div>
			</div>
		</div>
		<br>
		<br>
		</div>
		
		</div>
		<br>
  </div>
</template>

<script>

export default {
	data(){
		return {
			isdivide:true,
			buttoncolor1:"#ffce1c",
			buttoncolor2:"#d6d2cc",
			border:"solid 0.5px #dd9300",
			color:"#dd9300",
			isActive:[true,false,false,false,false,false],
			islogged:false,
			show_num:10,
			movies:[
					{
						mid:"123",
						m_name:"蜘蛛侠",
						rate:"9.0",
						imgurl:"img9.doubanio.com/view/photo/l/public/p2558293106.webp",
					},
					{
						mid:"123",
						m_name:"蜘蛛侠",
						rate:"9.0",
						imgurl:"img9.doubanio.com/view/photo/l/public/p2558293106.webp",
					},
					{
						mid:"123",
						m_name:"蜘蛛侠",
						rate:"9.0",
						imgurl:"img9.doubanio.com/view/photo/l/public/p2558293106.webp",
					},
					{
						mid:"123",
						m_name:"蜘蛛侠",
						rate:"9.0",
						imgurl:"img9.doubanio.com/view/photo/l/public/p2558293106.webp",
					},
					{
						mid:"123",
						m_name:"蜘蛛侠",
						rate:"9.0",
						imgurl:"img9.doubanio.com/view/photo/l/public/p2558293106.webp",
					},
					{
						mid:"123",
						m_name:"蜘蛛侠",
						rate:"9.0",
						imgurl:"img9.doubanio.com/view/photo/l/public/p2558293106.webp",
					},
					{
						mid:"123",
						m_name:"蜘蛛侠",
						rate:"9.0",
						imgurl:"img9.doubanio.com/view/photo/l/public/p2558293106.webp",
					},
					{
						mid:"123",
						m_name:"蜘蛛侠",
						rate:"9.0",
						imgurl:"img9.doubanio.com/view/photo/l/public/p2558293106.webp",
					},
					{
						mid:"123",
						m_name:"蜘蛛侠",
						rate:"9.0",
						imgurl:"img9.doubanio.com/view/photo/l/public/p2558293106.webp",
					},
					{
						mid:"123",
						m_name:"蜘蛛侠",
						rate:"9.0",
						imgurl:"img9.doubanio.com/view/photo/l/public/p2558293106.webp",
					},
			],
			likes:[
					{
							
					},
					{
							
					},
					{},{},{}
			],
		}
	},
	methods:{
		isDivide: function(){
			this.isdivide=true;
			this.buttoncolor1="#ffce1c";
			this.buttoncolor2="#d6d2cc"
		},
		notDivide: function(){
			this.isdivide=false;
			this.buttoncolor2="#ffce1c";
			this.buttoncolor1="#d6d2cc"
		},
		isChoose:function(index){
			for(var i =0;i<6;i++){
				this.$set(this.isActive, i, false);
			}
			this.$set(this.isActive, index, !this.isActive[index]);
		},
		search:function(){
			this.notDivide();
		},
	},
}
</script>


<style scoped>
#app{
	width: 100%;
	background:url(../assets/back41.png) no-repeat;
	background-size: cover;
	position: absolute;
	top: 0px;
	left: 0px;
}
.container{
	width: 80%;
	margin: auto;
	margin-top: 150px;
	/* margin-bottom: 20px; */
	border-radius: 5px;
	background-color: rgba(255, 255, 255, 0.7);
}
.toptitle{
	margin-top: 0px;
	width: 100%;
	height: 50px;
	border-radius: 5px 5px 0 0;
	background-color: #000000;
	text-align: center;
}
.topleft{
	/* display: inline-block; */
	width: 100%;
	height: 100%;
	/* background-color: blanchedalmond; */
}
.item{
	height: 50px;
	/* width: 10%; */
	margin-left: 30px;
	display: inline-block;
	text-align: center;
	line-height: 50px;
	color: aliceblue;
	float: left;
	/* background-color: aquamarine; */
}
.topleft a {
	color: aliceblue;
	text-decoration: none;
}
.topleft a:hover{
	color: #d7d7d7;
}
.user{
	/* width: 130px; */
	height: 50px;
	float: right;
	display: inline-block;
}
.userlog{
	margin-top: 12px;
	height:25px;
}
.userinfo1{
	display: inline-block;
	float: right;
	margin: 15px;
	font-size: 13px;
	color: #d0d0d0;
}
.userinfo2{
	display: inline-block;
	padding-left: 5px;
}
.searchPart{
	height: 140px;
	/* background-color: rgba(240, 240, 240, 0.9); */
	text-align: center;
	padding-top: 50px;
	/* background:url(../assets/back1.jpg) no-repeat; */
	/* background-size: 100%; */
}
.logo{
	width: 150px;
	vertical-align: middle;
}
.searchInput{
	height: 25px;
	width: 300px;
	margin-left: 30px;
	vertical-align: middle;
}
.searchButton{
	height: 31px;
	width: 80px;
	vertical-align: middle;
	background-color: #374044;
	color: #F0F8FF;
	border: 0px;
}
.listpart{
	background-color: #ffffff;
}
.menu{
	width: 100%;
	height: 80px;
	/* background-color: aquamarine; */
	margin: auto;
}
.divide{
	width: 120px;
	height: 40px;
	line-height: 40px;
	margin-left: 30px;
	margin-top: 50px;
	text-align: center;
	background-color: #ffce1c;
	display: inline-block;
}

.result{
	width: 120px;
	height: 40px;
	line-height: 40px;
	margin-left: 20px;
	text-align: center;
	background-color: #d6d2cc;
	display: inline-block;
}
.line{
	height: 3px;
	width: 50%;
	margin-left: 30px;
	margin-top: 5px;
	background-color: #aaa7ad;
}
.sort{
	width: 94%;
	height: 90px;
	margin: auto;
	margin-top: 35px;
	background-color: #f3f3f3;
}
.typesort{
	height: 25px;
	/* margin-top: 10px; */
	padding-top: 15px;
	padding-left: 15px;
	font-size: 13px;
	/* background-color: #DD9300; */
}
.type{
	height: 20px;
	width: 80px;
	text-align: center;
	display: inline-block;
	line-height: 20px;
	float: left;
	/* background-color: #D6D6D6; */
}
.typebutton{
	height: 20px;
	margin-left: 15px;
	padding-left: 10px;
	padding-right: 10px;
	text-align: center;
	line-height: 20px;
	display: inline-block;
	float: left;
	border-radius: 3px;
	/* background-color: #D6D6D6; */
}
.typebutton:hover:not(.typebutton0){
	background-color: #f8e7bb;
}
.list{
	width: 100%;
	/* height: 500px; */
	margin: auto;
	text-align: center;
	/* background-color: #FFFF7F; */
}
.movies{
	width: 96%;
	/* height: 90%; */
	margin-left: 2%;
	margin-top: 30px;
	/* background-color: #FFAA7F; */
}
.movie{
	width: 160px;
	height: 250px;
	/* background-color: #DDDDDD; */
	display: inline-block;
	margin: 20px;
	margin-top: 20px;
	font-size: 13px;
	/* border: solid 0.5px #DDDDDD; */
}
.mpic{
	height: 90%;
	/* background-color: #4CAF50; */
}
.mname{
	height: 15%;
	/* background-color: #e3e3e3; */
}
.name{
	/* float: left; */
	padding: 8px 8px;
	display: inline-block;
}
.score{
	/* float: right; */
	color: #e79a00;
	padding: 8px 8px;
	display: inline-block;
}

/* ul.pagination {
    display: inline-block;
    padding: 0;
	margin-top: 40px;
}
ul.pagination li {display: inline;}
ul.pagination li a {
    color: black;
    float: left;
    padding: 5px 10px;
    text-decoration: none;
    transition: background-color .3s;
    border: 1px solid #ddd;
    margin: 0 4px;
}
ul.pagination li a.active {
    background-color: #444343;
    color: white;
    border: 1px solid #c5c5c5;
}
ul.pagination li a:hover:not(.active) {background-color: #ddd;} */

.more{
	width: 85%;
	height: 40px;
	margin: auto;
	margin-top: 30px;
	line-height: 40px;
	font-size: 13px;
	color: #004E76;
	/* background-color: #f6f6f6; */
}
.more:hover{
	background-color: #f3f3f3;
}
.likepart{
	background-color: #f3f3f3;
	border-radius: 0 0 5px 5px;
}
.like{
	width: 100%;
	height: 80px;
	margin: auto;
	/* background-color: #F5F5DC; */
}
.likebutton{
	width: 120px;
	height: 40px;
	line-height: 40px;
	margin-left: 30px;
	margin-top: 30px;
	text-align: center;
	background-color: #ffce1c;
	display: inline-block;
}
.name2{
	padding-top: 10px;
	font-size: 13px;
}

</style>